import React,{Component} from 'react'
import SearchType from './FormData';
import { Form, Row, Col, Input, Button, Icon } from 'antd';
const FormItem = Form.Item;
//list表单类型的检索框
class ListSearchFrom extends Component{
    constructor(props){
        super(props);
    }
    state = {
        expand:false
    }
    toggle = () => {
        const { expand } = this.state;
        this.setState({ expand: !expand });
    }
    getFields= ()=> {
        const {min,max,column,form} = this.props;
        const count = this.state.expand ? max : min;
        const children = [];
        const formItemLayout = {
            labelCol: {
                xs: { span:24},
                sm: { span:4},
            },
            wrapperCol: {
                xs: { span:24},
                sm: { span:20 },
            },
        };
        column.map((item,index)=>{
            children.push(
                <Col span={6} key={index} style={{ display: index < count ? 'block' : 'none' }}>
                    <SearchType data={item} form={form}/>
                </Col>
            )
        });
        return children;
    }
    handleSearch=(e)=>{
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log(values);
        });
    }
    render(){
        return(
            <Form
                onSubmit={this.handleSearch}
            >
                <Row gutter={24}>
                    {this.getFields()}
                    <Col span={6} style={{ textAlign: 'center' }}>
                        <Button type="primary" htmlType="submit" onClick={this.handleSearch}>检索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleSearch}>
                            重置
                        </Button>
                        <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                            更多 <Icon type={this.state.expand ? 'up' : 'down'} />
                        </a>
                    </Col>
                </Row>
            </Form>
        )
    }
}
const ListSearch= Form.create({})(ListSearchFrom);
export default ListSearch;

